;(function () {
	var E = window.wangEditor
	var editor = new E('#editor')
	var editor1 = new E('#editor1')
	editor.customConfig.menus = [
			'bold',
			'italic',
			'foreColor'
	]
	editor1.customConfig.menus = [
			'bold',
			'italic',
			'foreColor'
	]	
			
	new Vue({
		el: '#custom-fields',
		data: {
			quanxian: JSON.parse(localStorage.getItem('permissions')),
			basicFeilds: [
				{name: '单行文本', code: 'text'},
				{name: '多行文本', code: 'area'},
				{name: '下拉单选', code: 'select'},
				{name: '单选按钮', code: 'radio'},
				{name: '复选按钮', code: 'checkbox'},
				{name: '分隔线', code: 'line'},
				{name: '时间', code: 'time'},
				{name: '日期', code: 'date'},
				{name: '文件', code: 'file'},
			],
			myArray: [
				{name: '选项一', code: '选项一', checked: false},
				{name: '选项二', code: '选项二', checked: false},
				{name: '选项三', code: '选项三', checked: false},
			],
			fileNums: [
				{name: '1', code: '1'},
				{name: '2', code: '2'},
				{name: '3', code: '3'},
			],
			format: [
				{name: '无', code: 'text'},
				{name: '邮箱', code: 'email'},
				{name: '手机', code: 'phone'},
				{name: '电话', code: 'mobile'},
			],
			isRadio: [
				{name: '是', code: '1'},
				{name: '否', code: '0'},
			],
			selectRadio: ['1'],
			customerTypes: [
				{name: '客户', code: 'CUSTOMER'},
				{name: '市场拓展', code: 'MARKET_EXPANSION_PROJECT'},
				{name: '合同', code: 'CONTRACT'},
				{name: '访客单', code: 'VISITOR_FORM'},
			],
			selectCustomerType: hlUrlUtil.GetQueryString('module') || 'CUSTOMER',
			tmpData: [],
			tmpObj: {},
			selectIndex: null,
			isBtnTypes: ['select', 'checkbox', 'radio'],
			isTextTypes: ['text', 'email', 'phone', 'mobile'],
			tmpName: '',
			textDefaultVal: '',
			selectFormat: [],
			customizeColumnData: [],
			tmpId: ''
		},
		methods: {
			rname (code) {
				if (!code) return;
				let name;
				this.basicFeilds.map(item => {
					if (code == item.code) {
						name = item.name
					}
				})
				return name
			},
			//获取账单合同类型code
			getCustomizeColumn () {
				hlhttp.get({
					url: 'configure/customize_column',
					data: {module: 'CMMN', config_name: 'CM_PRINT_TEMPLATE_TYPE'},
					success: (data) => {
						this.customizeColumnData = [...data.customizeColumns, ...data.systemColumns]
					}
				})
			},
			addTmp (item) {				
				this.tmpData.push({
					id: '#',
					type: item.code,
					name: item.name,
					component_type: 'base',
					code: '#',
					first_level_title: {style: {}, value: '<p>一级标题</p>'},
					second_level_title: {style: {}, value: '<p>二级标题</p>'},
					placeholder: '',
					required_flag: 'Y',
					valid: ['1'],
					default_val: [],
					select_list: item.code == 'select' ? JSON.parse(JSON.stringify(this.myArray)) : [],
					radio_list: item.code == 'radio' ? JSON.parse(JSON.stringify(this.myArray)) : [],
					checkbox_list: item.code == 'checkbox' ? JSON.parse(JSON.stringify(this.myArray)) : [],
					file: {size: null, num: [], isSize: true, isNum: true},
					printTemplateKey: '',
					printTemplateTypes: []
				})
				this.tmpObj = {
					id: '#',
					type: item.code,
					name: item.name,
					component_type: 'base',
					code: '#',
					first_level_title: {style: {}, value: '<p>一级标题</p>'},
					second_level_title: {style: {}, value: '<p>二级标题</p>'},
					placeholder: '',
					required_flag: 'Y',
					valid: ['1'],
					default_val: [],
					select_list: item.code == 'select' ? JSON.parse(JSON.stringify(this.myArray)) : [],
					radio_list: item.code == 'radio' ? JSON.parse(JSON.stringify(this.myArray)) : [],
					checkbox_list: item.code == 'checkbox' ? JSON.parse(JSON.stringify(this.myArray)) : [],
					file: {size: null, num: [], isSize: true, isNum: true},
					printTemplateKey: '',
					printTemplateTypes: []
				}				
				editor.txt.html('')
				editor1.txt.html('')
				if(item.code == 'text') {
					this.selectFormat = ['text']
				} else {
					this.selectFormat = []
				}
				this.textDefaultVal = ''
				this.selectIndex = this.tmpData.length-1
			},
			//选中某个自定义字段
			replaceTmp (item, i) {
				this.selectIndex = i;
				this.tmpObj = JSON.parse(JSON.stringify(item))
				editor.txt.html(this.tmpObj.first_level_title.value)
				editor1.txt.html(this.tmpObj.second_level_title.value)
				this.selectFormat = [this.tmpObj.type]
				this.textDefaultVal = this.tmpObj.placeholder
				if (this.tmpObj.file.size == -1) {
					this.tmpObj.file.size = null;
					this.tmpObj.file.isSize = true;
				}
				if (this.tmpObj.file.num == -1) {
					this.tmpObj.file.num = [];
					this.tmpObj.file.isSize = true;
				}
				this.selectRadio = JSON.parse(JSON.stringify(item.valid))
				console.log(this.tmpObj)
			},
			//复制某个自定义字段
			copyItem (item) {
				this.tmpData.push(item)				
				
				setTimeout(() => {
					this.selectIndex = this.tmpData.length-1;
					this.tmpObj = JSON.parse(JSON.stringify(item))
					editor.txt.html(this.tmpObj.first_level_title.value)
					editor1.txt.html(this.tmpObj.second_level_title.value)
					this.selectFormat = [this.tmpObj.type]
					this.textDefaultVal = this.tmpObj.placeholder
					if (this.tmpObj.file.size == -1) {
						this.tmpObj.file.size = null;
						this.tmpObj.file.isSize = true;
					}
					if (this.tmpObj.file.num == -1) {
						this.tmpObj.file.num = [];
						this.tmpObj.file.isSize = true;
					}
				},10)
			},
			//类型切换
			typeClick (item) {
				this.selectCustomerType = item.code
				this.get_page_customize_component_template()
			},
			//删除点击的临时字段
			delTmpFiled (i) {				
				this.tmpData.splice(i, 1)
				this.selectIndex = null;		
						
				setTimeout(() => {
					this.tmpObj = {}
					editor.txt.html('')
					editor1.txt.html('')
					this.selectFormat = []
					this.textDefaultVal = ''
				}, 10)
			},
			//添加选项
			addOption () {
				let flag;
				if(this.tmpObj.type == 'radio') {
					flag = this.tmpObj.radio_list.find(item => {return !item.name})
					if(flag) {
						hl.toast('请填写当前选项')
						return
					}
					this.tmpObj.radio_list.push({name: '', code: new Date().getTime(), checked: false})
				}
				if(this.tmpObj.type == 'select') {
					flag = this.tmpObj.select_list.find(item => {return !item.name})
					if(flag) {
						hl.toast('请填写当前选项')
						return
					}
					this.tmpObj.select_list.push({name: '', code: new Date().getTime(), checked: false})
				}
				if(this.tmpObj.type == 'checkbox') {
					flag = this.tmpObj.checkbox_list.find(item => {return !item.name})
					if(flag) {
						hl.toast('请填写当前选项')
						return
					}
					this.tmpObj.checkbox_list.push({name: '', code: new Date().getTime(), checked: false})
				}
			},
			//删除当前选项
			delOption (i) {
				if(this.tmpObj.type == 'radio') {					
					this.tmpObj.radio_list.splice(i, 1)
				}
				if(this.tmpObj.type == 'select') {					
					this.tmpObj.select_list.splice(i, 1)
				}
				if(this.tmpObj.type == 'checkbox') {					
					this.tmpObj.checkbox_list.splice(i, 1)
				}
			},
			//选择默认
			selectDefault (i) {				
				if(this.tmpObj.type == 'radio') {
					this.tmpObj.radio_list.map(item => {item.checked = false})
					this.tmpObj.radio_list[i].checked = !this.tmpObj.radio_list[i].checked
					this.tmpObj.default_val = [this.tmpObj.radio_list[i].code]
				}
				if(this.tmpObj.type == 'select') {
					this.tmpObj.select_list.map(item => {item.checked = false})
					this.tmpObj.select_list[i].checked = !this.tmpObj.select_list[i].checked
					this.tmpObj.default_val = [this.tmpObj.select_list[i].code]
				}
				if(this.tmpObj.type == 'checkbox') {
					this.tmpObj.default_val = []
					this.tmpObj.checkbox_list[i].checked = !this.tmpObj.checkbox_list[i].checked
					this.tmpObj.checkbox_list.map(item => {
						if (item.checked) {
							this.tmpObj.default_val.push(item.code)
						}
					})
				}
				this.$forceUpdate()
			},
			//选择关联打印模板
			selectPrintingAsd (type) {
				if (!this.tmpObj.printTemplateTypes) return;
				console.log(type)
				if (this.tmpObj.printTemplateTypes.indexOf(type) > -1) {
					this.tmpObj.printTemplateTypes.splice(this.tmpObj.printTemplateTypes.indexOf(type), 1)
				} else {
					this.tmpObj.printTemplateTypes.push(type)
				}				
			},
			//校验
			ischeck () {
				if (this.tmpObj.required_flag == 'Y') {				
					this.tmpObj.required_flag = 'N'
					return
				}
				if (this.tmpObj.required_flag == 'N') {
					this.tmpObj.required_flag = 'Y'
				}
			},
			//文件大小限制不限制
			fileSizeLimit () {
				this.tmpObj.file.isSize = !this.tmpObj.file.isSize
				this.tmpObj.file.size = null
			},
			//填写文件大小时触发
			filechange () {
				if (this.tmpObj.file.size) {
					this.tmpObj.file.isSize = false
				}
			},
			//文件数量限制不限制
			fileNumLimit () {
				this.tmpObj.file.isNum = !this.tmpObj.file.isNum
				this.tmpObj.file.num = []
			},
			//文件数量改变触发
			fileNumChange () {
				this.tmpObj.file.isNum = false
			},
			//拖拽结束触发
			drapEnd (ops) {				
				this.selectIndex = ops.moved.newIndex;
				setTimeout(() => {
					this.tmpObj = JSON.parse(JSON.stringify(ops.moved.element))
					editor.txt.html(this.tmpObj.first_level_title.value)
					editor1.txt.html(this.tmpObj.second_level_title.value)
					this.selectFormat = [this.tmpObj.type]
					this.textDefaultVal = this.tmpObj.placeholder
					if (this.tmpObj.file.size == -1) {
						this.tmpObj.file.size = null;
						this.tmpObj.file.isSize = true;
					}
					if (this.tmpObj.file.num == -1) {
						this.tmpObj.file.num = [];
						this.tmpObj.file.isSize = true;
					}
				}, 100)
			},
			//去除html标签
			delHtmlTag(str) {
				var reg = RegExp("<[^>]+>", "g");
				var result = str.replace(reg, '');
				return result; 
			},
			// 验证
			checkValidate () {				
				if (!this.delHtmlTag(editor1.txt.html()).length && this.tmpObj.type != 'line') {
					hl.toast('请填写二级标题')
					return false
				}
				return true
			},
			//保存当前临时数据
			tmpSubmit () {		
				if (!this.selectIndex && this.selectIndex !== 0) return;
				if (!this.checkValidate()) return;
				this.tmpObj.first_level_title.value = editor.txt.html()
				this.tmpObj.second_level_title.value = editor1.txt.html()
				if (this.isTextTypes.indexOf(this.tmpObj.type) > -1 || this.tmpObj.type == 'area') {
					if (this.textDefaultVal) {
						this.tmpObj.placeholder = JSON.parse(JSON.stringify(this.textDefaultVal))
					}
					this.tmpObj.type = JSON.parse(JSON.stringify(this.selectFormat))[0] || 'area'
				}
				if (this.tmpObj.type == 'file') {
					if (this.tmpObj.file.isSize) this.tmpObj.file.size = -1;
					if (this.tmpObj.file.isNum) this.tmpObj.file.num = -1;
				}
				if (this.tmpObj.type == 'line') {
					this.tmpObj.required_flag = 'N'
				}
				this.tmpObj.valid = JSON.parse(JSON.stringify(this.selectRadio))
				this.tmpData.splice(this.selectIndex, 1, JSON.parse(JSON.stringify(this.tmpObj)))
				
				console.log(this.tmpObj)
			},
			//预览
			previewPage () {
				localStorage.setItem('previewPcMoblie', JSON.stringify(this.tmpData))
				hlUrlUtil.goTo('previewPcMoblie', { ddtab: true, type: this.selectCustomerType }, true)
			},
			//获取列表接口
			get_page_customize_component_template () {
				this.tmpData = []
				let isArr = ['select', 'radio', 'checkbox']
				hlhttp.get({
					url: 'page_customize_component_template',
					data: {type: this.selectCustomerType},
					success: (data) => {
						this.tmpId = data.id;
						data.pageCustomizeComponent.map(item => {
							this.tmpData.push({
								id: item.id || '#',
								type: item.type,
								name: item.name,
								component_type: 'base',
								code: item.code,
								first_level_title: item.firstLevelTitle,
								second_level_title: item.secondLevelTitle,
								placeholder: item.placeholder,
								required_flag: item.requiredFlag,
								valid: [item.valid],
								default_val: item.defaultVal,
								select_list: item.selectList,
								radio_list: item.radioList,
								checkbox_list: item.checkboxList,
								file: item.type == 'file' ? {size: item.file.size, num: [item.file.num], isSize: item.file.size > -1 ? false : true, isNum: item.file.num > -1 ? false : true} : {},
								printTemplateKey: item.printTemplateKey,
								printTemplateTypes: item.printTemplateTypes ? item.printTemplateTypes.split(',') : [],
								value: isArr.indexOf(item.type) == -1 ? '' : (item.defaultVal.length ? item.defaultVal : [])
							})
						})						
					}
				})
			},
			//提交数据
			submitData () {
				
				let page_customize_component = []
				this.tmpData.map(item => {
					page_customize_component.push({
						id: item.id,
						code: item.code,
						name: item.name,
						type: item.type,
						component_type: item.component_type,
						placeholder: item.placeholder,
						required_flag: item.required_flag,
						valid: item.valid[0],
						print_template_flag: item.printTemplateTypes.length ? 'Y' : 'N',
						print_template_types: item.printTemplateTypes.length ? item.printTemplateTypes.toString() : '#',
						print_template_key: item.printTemplateKey || '#',
						first_level_title: {style: item.first_level_title.style, value: item.first_level_title.value, content: this.delHtmlTag(item.first_level_title.value)},
						second_level_title: {style: item.second_level_title.style, value: item.second_level_title.value, content: this.delHtmlTag(item.second_level_title.value)},
						default_val: item.default_val,
						select_list: item.select_list,
						radio_list: item.radio_list,
						checkbox_list: item.checkbox_list,
						file: item.type == 'file' ? {size: item.file.isSize ? -1 : item.file.size, num: item.file.isNum ? -1 : item.file.num[0]} : '#'
					})
				})
				hlhttp.put({
					url: 'page_customize_component_template',
					data: {
						id: this.tmpId,
						type: this.selectCustomerType,
						page_customize_component: JSON.stringify(page_customize_component)
					},
					success: (data) => {
						hl.toast('保存成功')
						this.get_page_customize_component_template()
					}
				})
			}
		},
		mounted() {
			this.getCustomizeColumn()
			editor.create()
			editor1.create()
			//详情
			this.get_page_customize_component_template()			
			
		}
	})
} ())